<template>
   <div class="postOfRelease">
      <myHead title="职位发布"></myHead>
      <section :style="{height:$store.state.minHeight-1.2+'rem'}">
         <div class="head">
            <div class="head-box">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>职位名称</p>
               </div>
               <div class="head-box-right">
                  <input type="text" placeholder="如：人力资源经理" v-model="name">
               </div>
            </div>
            <div class="head-box">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>薪资范围</p>
               </div>
               <div class="head-box-right1" @click="selList(0)">
                  <p>{{money}}</p>
                  <img src="../../../static/img/youjiantou003.png" alt="">
               </div>
            </div>
           <div class="head-box">
             <div class="head-box-left">
               <img src="../../../static/img/fabuxing.png" alt="">
               <p>教育程度</p>
             </div>
             <div class="head-box-right1" @click="selList(4)">
               <p>{{education}}</p>
               <img src="../../../static/img/youjiantou003.png" alt="">
             </div>
           </div>
            <div class="head-box">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>工作年限</p>
               </div>
               <div class="head-box-right1" @click="selList(1)">
                  <p>{{year}}</p>
                  <img src="../../../static/img/youjiantou003.png" alt="">
               </div>
            </div>
            <div class="head-box">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>工作性质</p>
               </div>
               <div class="head-box-right1" @click="selList(2)">
                  <p>{{work}}</p>
                  <img src="../../../static/img/youjiantou003.png" alt="">
               </div>
            </div>
            <div class="head-box">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>工作地址</p>
               </div>
               <div class="head-box-right1" @click="selList(3)">
                  <p>{{address}}</p>
                  <img src="../../../static/img/youjiantou003.png" alt="">
               </div>
            </div>
            <div class="head-box head-box1">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>地&emsp;&emsp;址</p>
               </div>
               <div class="head-box-right">
                  <textarea placeholder="请输入详细地址" v-model="addressDesc"></textarea>
               </div>
            </div>
         </div>
         <div class="fg"></div>
         <div class="add-demand">
            <div class="add-demand-top">
               <div class="add-demand-l">职位要求</div>
               <div class="add-demand-r">
                  <input type="text" placeholder="如：165cm/限女性" v-model="valDemand">
                  <p @click="addDemand">添加</p>
               </div>
            </div>
            <div class="add-demand-bot">
               <div class="add-demand-bot-msg" v-show="demand.length<1">请添加要求~</div>
               <p v-for="(x,y) in demand" @click="delDemand(y)"><span>{{x}}</span><img src="../../../static/img/delt001.png" alt=""></p>
            </div>
         </div>
         <div class="zwms">
            <div class="zwms-head">
               <img src="../../../static/img/fabuxing.png" alt="">
               <p>职位描述</p>
            </div>
            <div class="zwms-bot">
               <textarea placeholder="请编辑该职位相关的岗位要求及工作内容" v-model="workDesc"></textarea>
            </div>
         </div>
         <div class="fg"></div>
         <div class="gs">
            <div class="head-box">
               <div class="head-box-left">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>公司名称</p>
               </div>
               <div class="head-box-right">
                  <input type="text" placeholder="如：xxx科技有限公司" v-model="company">
               </div>
            </div>
            <div class="zwms">
               <div class="zwms-head">
                  <img src="../../../static/img/fabuxing.png" alt="">
                  <p>公司描述</p>
               </div>
               <div class="zwms-bot">
                  <textarea placeholder="请编辑该公司相关的介绍内容" v-model="companyDesc"></textarea>
               </div>
            </div>
         </div>
      </section>
      <footer @click="save">发布职位</footer>

      <!-- 选择列表  -->
      <van-popup v-model="show" position="bottom">
         <van-picker  show-toolbar :columns="columns.list" @confirm="onConfirm" @cancel="onCancel" @change="onChange"/>
      </van-popup>

   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";

    export default {
        name: "postOfRelease",
        components: {
            myHead
        },
        data() {
            return {
                activeId: 1,
                activeIndex: 0,
                selectIndex:0,
                postShow:false, // 控制岗位显示
                demand:[], // 要求列表
                valDemand:'', // 要求值
                columns: {list:[],id:[]}, // 选择列表
                show:false,
                money:'4000-6000', // 薪资范围
                year:'1~3年', // 工作年限
                work:"全职", // 工作性质
                address:"西安财经大学", // 工作地点
                education:"本科", // 受教育程度
                name:"",
                company:"",
                companyDesc:"",
                workDesc:"",
                addressDesc:"",
            }
        },
        methods:{
            selctList(type){
                switch (type) {
                    case 0 :
                        this.postShow = true;
                        break
                }
            },
            addDemand() {
                if (this.valDemand == '' || this.valDemand.replace(/\s+/g,"") == '') {return}
                this.demand.push(this.valDemand.replace(/\s+/g,""));
                this.valDemand = '';
            },
            delDemand(y){
                this.demand.splice(y,1);
            },
            onConfirm(value, index) {
                this.show = false;
                // console.log(`当前值：${value}, 当前索引：${index}`);
              // this.selectIndex = index;
              switch (this.selectIndex) {
                case 0:
                  this.money = value;
                  break;
                case 1:
                  this.year = value;
                  break;
                case 2:
                  this.work = value;
                  break;
                case 3:
                  this.address = value;
                  break;
                case 4:
                  this.education = value;
                  break;
              }
            },
            onChange(picker, value, index) {
                // console.log(`当前值：${value}, 当前索引：${index}`);
            },
            onCancel() {
                this.show = false;
                console.log('取消');
            },
            save(){
              this.$myAxios('index/Moonlighted/moonlighted', 'post',{
                post_id:1,
                user_id:this.$myStorage.query(),
                company:this.company,
                name:this.name,
                salary:this.money,
                work:this.work,
                request:JSON.stringify(this.demand),
                sex:"",
                companytime:"",
                education:this.education,
                place:this.address,
                desc:this.companyDesc,
                describe:this.workDesc,
                years_of_working:this.year,
                headline_id:1,
              }).then(res => {

              });
            },
            selList(index) {
                this.show = true;
                this.selectIndex = index;
                switch (index) {
                    case 0:
                        this.columns.list = ['4000-6000','6000-9000','9000-12000','12000-15000'];
                        break;
                    case 1:
                        this.columns.list = ['1~3年','2年以上','5年以上'];
                        break;
                    case 2:
                        this.columns.list = ['全职','兼职','实习','校园代理'];
                        break;
                    case 3:
                        this.columns.list = ['西安财经大学','西安师范大学','西安政法大学','西安外国语学院'];
                        break;
                    case 4:
                      this.columns.list = ['高中','中专','大专','本科','研究生'];
                      break;
                }
            }
        }
    }
</script>

<style scoped>
   .postOfRelease {
      width: 100%;
      box-sizing: border-box;
      min-height: 6.67rem;
      padding-top: .5rem;
   }

   section {
      width: 100%;
      box-sizing: border-box;
      margin-bottom: .2rem;
      overflow-x: hidden;
      padding-bottom: .1rem;
   }
   .head-box {
      padding: 0 .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      height: .5rem;
      box-sizing: border-box;
      border-bottom: .01rem solid #F5F5F5;
      justify-content: space-between;
   }
   .head-box-left {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .head-box-left>img {
      width: .05rem;
      height: .05rem;
      margin-right: .1rem;
   }
   .head-box-left>p {
      width: .6rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:400;
      color: #333333;
   }
   .head-box-right,.head-box-right1 {
      width: calc(100% - .8rem);
      box-sizing: border-box;
      padding-left: .1rem;
   }
   .head-box-right1 {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .head-box-right1>img {
      width: .07rem;
      height: .12rem;
   }
   .head-box-right1>p {
      width:1rem;
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .head-box-right>input {
      font-size: .14rem;
      width: 100%;
      border: none;
      outline: none;
      padding-left: 0;
   }
   .head-box1 {
      height: inherit;
      align-items: flex-start;
      padding-top: .1rem;
   }
   .head-box-right>input::placeholder {
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .head-box-right>textarea::placeholder {
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .head-box-right>textarea {
      font-size: .14rem;
      width: 100%;
      height: .4rem;
      line-height: .15rem;
      border: none;
      outline: none;
      padding-left: 0;
      resize: none;
      border: none;
   }
   .fg {
      height: .05rem;
      background-color: #F5F5F5;
   }

   .add-demand {

   }
   .add-demand-top {
      display: flex;
      flex-flow: row;
      align-items: center;
      height: .5rem;
      box-sizing: border-box;
      border-bottom: .01rem solid #F5F5F5;
      padding: 0 .3rem;
   }
   .add-demand-bot {
      padding: .1rem .3rem;
      min-height: .5rem;
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      box-sizing: border-box;
      border-bottom: .01rem solid #F5F5F5;
   }
   .add-demand-l {
      width: .75rem;
      font-size:.14rem;
      font-family:PingFang SC;
      color: #333333;
   }
   .add-demand-r {
      width: calc(100% - .75rem);
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .add-demand-r>input {
      font-size: .14rem;
      width: 75%;
      border: none;
      outline: none;
      padding-left: 0;
   }
   .add-demand-r>input::placeholder {
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .add-demand-r>p {
      color: #FF7E2E;
      font-size:.14rem;
      font-family:PingFang SC;
      padding: 0 .05rem;
      line-height: .25rem;
   }
   .add-demand-bot>p {
      display: inline-block;
      background:rgba(255,126,46,0.1);
      border:.01rem solid rgba(255,126,46,1);
      border-radius: .03rem;
      padding: 0 .1rem;
      position: relative;
      line-height: .2rem;
      font-size:.12rem;
      font-family:PingFang SC;
      color: #FF7E2E;
      margin-right: .2rem;
      margin-bottom: .1rem;
   }
   .add-demand-bot>p>img {
      width: .12rem;
      height: .12rem;
      position: absolute;
      right: -.06rem;
      top: -.06rem;
   }

   .zwms {
      padding: 0 .15rem .1rem;
   }

   .zwms-head {
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .zwms-head>img{
      width: .05rem;
      height: .05rem;
      margin-right: .1rem;
   }
   .zwms-head>p {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
   }
   .zwms-bot{
      width:100%;
      height:2rem;
      background:rgba(248,248,248,1);
      border-radius:.03rem;
      box-sizing: border-box;
      padding: .1rem;
   }
   .zwms-bot>textarea {
      font-size: .14rem;
      width: 100%;
      height: 100%;
      line-height: .15rem;
      border: none;
      outline: none;
      padding-left: 0;
      resize: none;
      background-color: transparent;
   }
   .zwms-bot>textarea::placeholder {
      font-size:.14rem;
      font-family:PingFang SC;
      color: #999999;
   }
   .add-demand-bot-msg {
      width: 100%;
      color: #999999;
      line-height: .3rem;
      font-size: .12rem;
      font-family:PingFang SC;
   }



   footer {
      position: fixed;
      bottom: .15rem;
      left: 0;
      right: 0;
      width: 90%;
      height: .45rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
      border-radius: .23rem;
      text-align: center;
      line-height: .46rem;
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin: 0 auto;
   }

</style>
